/**
 * 	index.js
 * 	author:jtr
 */
$(function () {
	(function () {
		// 刷新置顶
		$(function(){
			setTimeout(function(){
				$(document).scrollTop(0);
			},200);
		});
		/**
		 * [HeaderNav 头部导航对象]
		 * @param {[type]} nav       $nav导航对象
		 * @param {[type]} left      左侧logo对象
		 * @param {[type]} rightList 右侧导航按钮
		 * @param {[type]} bar       显示的状态栏
		 * @param {[type]} logo      yys-logo图
		 * @param {[type]} role      角色图片
		 */
		function HeaderNav(nav,left,rightList,bar,logo,role){
			this.doc = $(document);
			this.nav = nav;
			this.left = left;
			this.list = rightList;
			this.bar = bar;
			this.logo = logo;
			this.role = role;
			this.rolePic = this.role.children('img');
			this.btn = this.role.children('.btn');

			this.logo.open = false;
			this.bar.open = false;
			this.nav.open = false;
			this.list.open = false;
			this.left.open = false;
			this.rolePic.each(function(){
				this.open = false;
			});
		}
		HeaderNav.prototype = {
			exec : function(){	
				this.init();
				this.roll();
				this.showBar();
				this.roleChange();
			},
			init : function(){
				var self = this;
				$(function(){
					setTimeout(function(){
						self.logo.animate({
							opacity:1,
							left:50
						},500);
					},1500);
					self.rolePic.get(0).open = true;
					self.rolePic.get(1).open = true;
					self.change();
				});
			},
			roll : function(){		
				var self = this;
				this.doc.scroll(function(){
					var top = self.doc.scrollTop();
					if(top>0){
						self.nav.open = true;
						self.left.open = true;
						self.doc.open = true;
						self.logo.open = true;
					}else{
						self.nav.open = false;
						self.left.open = false;
						self.doc.open = false;
						self.logo.open = false;
					}
					self.change();
				});
			},
			change : function(obj){
				this.nav.open?this.nav.addClass('on'):this.nav.removeClass('on');
				this.left.open?this.left.addClass('on'):this.left.removeClass('on');
				this.bar.open?this.bar.addClass('on'):this.bar.removeClass('on');
				this.logo.open?this.logo.addClass('on'):this.logo.removeClass('on');
				this.rolePic.each(function(){
					this.open?$(this).addClass('on'):$(this).removeClass('on');
				});
				if(obj!=null){
					obj.open?obj.addClass('on'):obj.removeClass('on');
				}			
			},
			showBar : function(){
				var self = this;
				var $triangle = null;
				this.list.hover(function(){
					$triangle = $(this).find('.triangle');
					if(!$triangle.get(0))return;
					$triangle.open = true;
					self.bar.open = true;
					self.nav.open = true;
					self.change($triangle);
				},function(){
					$triangle.open = false;
					self.bar.open = false;
					if(!self.doc.open){
						self.nav.open = false;
					}
					self.change($triangle);
					//bar-hover
					self.bar.hover(function(){
						$triangle.open = true;
						self.bar.open = true;
						self.nav.open = true;
						self.change($triangle);
					},function(){
						$triangle.open = false;
						self.bar.open = false;
						if(!self.doc.open){
							self.nav.open = false;
						}
						self.change($triangle);
					});
				});
			},
			roleChange : function(){
				var self = this;
				var flag = false;
				this.btn.get(0).onclick=function(){
					if(flag)return;
					if(self.rolePic.get(0).open && self.rolePic.get(1).open){
						self.rolePic.get(0).open = false;
						self.rolePic.get(1).open = false;
						setTimeout(function(){
							self.rolePic.get(2).open = true;
							self.rolePic.get(3).open = true;
							self.change();
						},1200);
					}else{
						self.rolePic.get(2).open = false;
						self.rolePic.get(3).open = false;
						setTimeout(function(){
							self.rolePic.get(0).open = true;
							self.rolePic.get(1).open = true;
							self.change();
						},1200);
					}
					self.change();
					setTimeout(function(){//防止重复点击
						flag = false;
					},2000);
					flag = true;
					return false;
				};
			}
		};
		/**
		 * [Carousel 轮播图]
		 * @param {[$obj]} wrap 容器
		 * @param {[$obj]} box 滑动对象
		 * @param {[$obj]} btn 按钮
		 * @param {[boolean]} boolean是否自动轮播
		 * @param {[number]} time录播间隔
		 */
		function Carousel(wrap,box,btn,boolean,time){
			this.wrap = wrap;
			this.box = box;
			this.btn = btn;
			this.width = 0;//图片宽度
			this.index = 0;//下标
			this.list = this.box.children();//轮播子项
			this.time = time?time:1500;//轮播间隔时间
			this.timer = null;
			this.boolean = boolean;
		}
		Carousel.prototype = {
			exec : function(){
				this.init();
				this.paly();
				this.boolean?this.auto():'';
			},
			init : function(){
				this.width = this.list.eq(0).outerWidth();
				this.btn.each(function(i){
					this.index = i;
				});
				return this;
			},
			paly : function(){
				var self = this;
				this.btn.hover(function(){
					self.btn.removeClass('on');
					self.index = this.index;
					self.box.css('left',-self.index*self.width);
					self.btn.eq(self.index).addClass('on');
				},function(){
					self.btn.eq(self.index).addClass('on');
				});
				return this;
			},
			auto : function(){
				var self = this;
				action();
				this.wrap.hover(function(){
					clearInterval(self.timer);
					self.timer = null;
				},function(){
					setTimeout(function(){
						action();
					},self.time);
				});
				function action(){
					if(self.timer)return;//单例模式!
					self.timer = setInterval(function(){
						self.btn.eq(self.index).removeClass('on');
						self.index ++;
						self.index %= self.list.length;
						self.btn.eq(self.index).addClass('on');
						self.box.css('left',-self.index*self.width);
					},self.time);
				}
			}
		};
		/**
		 * [NewsInfo 给新闻section添加数据]
		 * @param {[json]} data [模拟json数据]
		 * @param {[$]} list [$对象list]
		 * @param {[$]} btn  [$对象btn]
		 */
		function NewsInfo(data,list,btn){
			this.data = data;
			this.list = list;
			this.btn = btn;
		}
		NewsInfo.prototype = {
			exec : function(){
				this.init();
				this.getData();
			},
			init : function(){
				this.list.html(' ');
			},
			getData : function(){
				var self = this;
				this.list.each(function(i){//i=>$list的下标
					var num = 0;
					for (var j = 0,length = self.data.length; j < length; j++) {
						if(!i || self.data[j].typeX === i-1){
							self.list.eq(i).append('<a href="javascript:">'+self.data[j].title+'</a><em>'+self.data[j].time+'</em>');
							num++;
						}
						if(num>=5){
							break;
						}
					}
				});
			}
		};
		/**
		 * [Shishen 加载式神数据]
		 * @param {json} data 模拟json数据
		 * @param {$} box  接收的容器
		 * @param {$} btn  按钮对应的选项
		 */
		function Shishen(data,box,btn){
			this.data = data;
			this.box = box;
			this.btn = btn;
		}
		Shishen.prototype = {
			exec : function(){
				this.init();
				this.getInfo();
			},
			init : function(){
				var self = this;
				self.box.html(' ');
				this.btn.each(function(){
					$('<ul onselectstart="return false"></ul>').appendTo(self.box);
				});
			},
			getInfo : function(){
				var self = this,
					count = [
						[],//all
						[],//SSR
						[],//SR
						[],//R
						[],//N
					];
				for(var j=0,length=this.data.length;j<length-1;j++){
					switch(shishenData[j].level){
						case 'SSR': 
							count[1].push(shishenData[j]);
							break;
						case 'SR':
							 count[2].push(shishenData[j]);
							break;
						case 'R': 
							count[3].push(shishenData[j]);
							break;
						case 'N':
							count[4].push(shishenData[j]);
							break;
					}
					count[0].push(shishenData[j]);
				}
				this.btn.each(function(j){
					var length = count[j].length;
					var num = Math.ceil(length/12);
					var frag = '';
					var index = 0;
					var lastNum = Math.floor(length%12/2) + length%12%2;//最后的数量;
					var width = lastNum*(88+50);//图片宽度
					var $obj = '';

					for(var n=0 ;n<num;n++){
						self.box.children().eq(j).append('<li></li>');
					}		
					for (var i = 1; i <= length ; i++) {
						frag += self.cell(count[j][i-1].id,count[j][i-1].name,count[j][i-1].isNew,i,length);
						if( (i%12===0 || i === length)){
							self.box.children().eq(j).children().eq(index).append(frag);//$list!
							index ++ ;
							frag = '';
						}
					}
					//调整li格式
					$obj = self.box.children().eq(j).children().eq(num-1);
					if(width!==0){
						$obj.css('width',width);
					}
					//调整a格式
					if(length%2!==0){
						$obj.find('a').eq(length%12-1).css('top',-55);
					}
				});

			},
			cell : function(src,name,isNew,index,length){
				var i = isNew?'<i></i>':'';
				var cell = '';
				cell = '<a href="javascript:">\
							<img src=../img/index-img/peace-trip/shishen/'+ src +'.png alt="">\
							<em>\
								<span class="td">\
									<span class="tc">'+ name +'</span>\
								</span>\
							</em>\
							'+i+'\
						</a>';
				if((index%2 === 0 && index%12 !== 0 )|| (index === length && index%12 !== 0)){
					cell += '<span class="line"></span>';
				}
				return cell;
			}
		};

		function ClickSildeShow(btn,box,nextBtn){
			this.nextBtn = nextBtn;
			this.btn = btn;
			this.box = box;
			this.ul = this.box.children();
			this.index = 0;
			this.width = 0;
		}
		ClickSildeShow.prototype = {
			exec : function(){
				this.init();
				this.toClick();
				this.toNext();
			},
			init : function(){
				this.btn.removeClass('on');
				this.ul.removeClass('on');
				this.btn.eq(this.index).addClass('on');
				this.ul.eq(this.index).addClass('on');
				this.ul.each(function(){
					this.ins = 0;
				});
				this.width = this.ul.eq(0).find('li').eq(0).outerWidth();
			},
			toClick : function(){
				var self = this;
				this.btn.click(function(){
					var $this = $(this);
					//next-init
					self.ul.eq(self.index).get(0).ins = 0;
					self.ul.eq(self.index).css('left',0);
					//tab-change
					self.btn.eq(self.index).removeClass('on');
					self.ul.eq(self.index).removeClass('on');
					self.index = $this.index();
					$this.addClass('on');
					self.ul.eq(self.index).addClass('on');
					//nextBtn-init
					self.ul.eq(self.index).get(0).ins <= 0?self.nextBtn.eq(0).hide():self.nextBtn.eq(0).show();
					self.ul.eq(self.index).get(0).ins >= self.ul.eq(self.index).find('li').length-1?self.nextBtn.eq(1).hide():self.nextBtn.eq(1).show();
				});
			},
			toNext : function(){
				var self = this;
				var $obj = self.ul.eq(self.index);
				var obj = $obj.get(0);
				var length = $obj.find('li').length;
				//init
				obj.ins <= 0?this.nextBtn.eq(0).hide():this.nextBtn.eq(0).show();
				obj.ins >= length-1?this.nextBtn.eq(1).hide():this.nextBtn.eq(1).show();
				//action
				this.nextBtn.each(function(i){
					$(this).click(function(){
						$obj = self.ul.eq(self.index);
						obj = $obj.get(0);
						length = $obj.find('li').length;
						if(i){
							obj.ins ++;
							$obj.css('left',-self.width*obj.ins);
						}else{
							obj.ins--;
							$obj.css('left',-self.width*obj.ins);
						}
						obj.ins >= length-1?self.nextBtn.eq(1).hide():self.nextBtn.eq(1).show();
						obj.ins <= 0?self.nextBtn.eq(0).hide():self.nextBtn.eq(0).show();
					});
				});
			}
		};
		/**
		 * [Strategy 下载攻略数据]
		 * @param {json} data 模拟json数据
		 * @param {$} box  容器
		 * @param {$} btn  按钮
		 */
		function Strategy(data,box,btn){
			this.data = data;
			this.box = box;
			this.btn = btn;
		}
		Strategy.prototype = {
			exec : function(){
				this.init();
				this.loading();
			},
			init : function(){
				var frag = '';
				this.btn.each(function(){
					frag += '<li><ol></ol></li>';
				});
				this.box.html(' ');
				this.box.append(frag);
				return this;
			},
			loading : function(){
				var self = this;
				var arr = [				//all-新手-式神-斗技-玩法//0 - 新手  1 - 式神  2 - 斗技  3 - 玩法
					[],[],[],[],[] 
				];								
				var length = this.data.length;
				for(var j=0;j<length-1;j++){
					var flag = this.data[j].type.match(/^\d{1}/)[0];
					switch(+flag){
						case 0: arr[1].push(this.data[j]);break;
						case 1: arr[2].push(this.data[j]);break;
						case 2: arr[3].push(this.data[j]);break;
						case 3: arr[4].push(this.data[j]);break;
					}
					arr[0].push(this.data[j]);
				}
				this.btn.each(function(i){

					for (var j= 0; j < arr[i].length; j++) {
						if(j<10){
							self.box.children().eq(i).children().eq(0).append(self.mode(arr[i][j].title,arr[i][j].author));
						}
					}
				});
			},
			mode : function(p,span){
				var cell = '';
				cell = '<li> \
							<i class="arrow"></i> \
							<p> ' +  p + '</p>\
							<span class="author">'+ span +'</span> \
						</li>';
				return cell;
			}
		};
		function Cosplay(data,box,btn){
			Strategy.call(this,data,box,btn);
		}
		function Fn(){}
		Fn.prototype = Strategy.prototype;
		Cosplay.prototype = new Fn();
		Cosplay.prototype.constructor = Cosplay;
		Cosplay.prototype.init = Strategy.prototype.init;
		Cosplay.prototype.exec = function(){
			this.init();
			this.loading();
		};
		Cosplay.prototype.loading = function(){
			var self = this;
			var length = this.data.length;
			var arr = [];
			for(var j=0; j<this.btn.length;j++){
				arr.push([]);
			}
			for(j=0; j<this.data.length; j++){
				switch(this.data[j].type){
					case 0: arr[0].push(this.data[j]);break;
					case 1: arr[1].push(this.data[j]);break;
					case 2: arr[2].push(this.data[j]);break;
					case 3: arr[3].push(this.data[j]);break;
					case 4: arr[4].push(this.data[j]);break;
					case 5: arr[5].push(this.data[j]);break;
				}
			}
			this.btn.each(function(i){
				for(j=0;j<arr[i].length;j++){
					if(j<8){
						self.box.children().eq(i).children().eq(0).append(self.mode(arr[i][j].url,arr[i][j].title));
					}
				}
			});
		};
		Cosplay.prototype.mode = function(url,p){
			return '<li> \
						<a href="javascript:">\
							<img src="../img/index-img/cosplay'+ url +'" alt="">\
							<em><i></i></em>\
						</a>\
						<p>'+ p +'</p>\
					</li>';
		};
		/*------------------------------header----------------------------*/
		(function(){
			var $nav = $('header > nav'),
				$ol = $('header > nav > ol'),
				$list = $('header > nav > ul > li'),
				$bar = $('header > nav > .bar'),
				$logo = $('header > .yys-logo'),
				$role = $('header > .role');
			var check = new HeaderNav($nav,$ol,$list,$bar,$logo,$role).exec();
		})();
		/*------------------------------aside----------------------------*/
		(function(){
			var $btn1 = $('aside > figure.download > .qrcode'),
				$down = $('aside > figure.download');
				$btn2 = $('aside > figure.download > ul >li:nth-child(1) > .btn');
			init();
			function init(){
				$btn1.toggleClass('on');
				$down.toggleClass('on');
			}
			$btn1.click(function(){
				$btn1.toggleClass('on');
				$down.toggleClass('on');
			});	
			$btn2.click(function(){
				$btn1.toggleClass('on');
				$down.toggleClass('on');
			});
		})();
		/*------------------------------news----------------------------*/
		(function(){
			var $wrap = $('section.news > figure');
				$box = $('section.news > figure > ul'),
				$btn = $('section.news > figure > ol > li'),
				$wrap2 = $('section.news > nav.news-info'),
				$box2 = $('section.news > nav.news-info > .content > ul'),
				$btn2 = $('section.news > nav.news-info > .banner > ul > li'),
				$list = $('section.news > nav.news-info > .content > ul > li');
			var news = new NewsInfo(newData,$list,$btn2).exec();
			var leftCarousel = new Carousel($wrap,$box,$btn,true).exec(),
				rightCarousel = new Carousel($wrap2,$box2,$btn2).exec();
		})();
		/*------------------------------平安之旅----------------------------*/
		(function(){
			var $box = $('section.peace-trip > figure > .container'),
				$btn = $('section.peace-trip > figure > .tab > a:not(a:last-child)'),
				$nextBtn = $('section.peace-trip > figure > .btn');
				$tabBtn = $('section.peace-trip > nav > div ');
				$peaceTab = $('section.peace-trip>*:not(nav)');
			// 加载式神数据
			var addInfo = new Shishen(shishenData,$box,$btn).exec();
			//式神轮播
			var paly = new ClickSildeShow($btn,$box,$nextBtn).exec();
			//tab切换
			tabChange();
			function tabChange(){
				$tabBtn.click(function(e){
					$tabBtn.removeClass('on');
					$(this).addClass('on');
					$peaceTab.hide();
					$peaceTab.eq($(this).index($tabBtn)).show();
				});
			}
			//role切换
			var $roleBtn= $('section.peace-trip > .role > .btn > ul > li'),
				$roleBox = $('section.peace-trip > .role > .pic > ul > li');
			roleChange();
			function roleChange(){
				$roleBtn.click(function(){
					$roleBtn.removeClass('on');
					$(this).addClass('on');
					$roleBox.removeClass('on');
					$roleBox.eq($(this).index()).addClass('on');
				});
			}
		})();
		/*------------------------------strategy攻略----------------------------*/
		(function(){
			var $wrapLeft = $('section.strategy > .s-left > .l-bottom');
				$btnLeft = $('section.strategy > .s-left > .l-bottom > ol > li'),
				$boxLeft = $('section.strategy > .s-left > .l-bottom > ul'); 

			var playLeft = new Carousel($wrapLeft,$boxLeft,$btnLeft,true,5000).exec();	
			//rihgt-content
			var $boxRight = $('section.strategy > .s-right > .r-bottom > .r-b-wrap > ul'),
				$tabBtn = $('section.strategy > .s-right > .r-top > a');
			//加载攻略数据
			var loadStrategy = new Strategy(strateData,$boxRight,$tabBtn).exec();
			//轮播
			var playRight = new Carousel($boxRight,$boxRight,$tabBtn).exec();
		})();
		/*------------------------------cosplay同人----------------------------*/
		(function(){
			var $tabBtn = $('section.cosplay > nav.cp > .cp-btn > .cp-btn-wrap > a'),
				$box = $('section.cosplay > figure.cp > ul');
			var loadCosplay = new Cosplay(fanData,$box,$tabBtn).exec();
			var paly = new Carousel($box,$box,$tabBtn).exec();

		})();
		/*------------------------------活动区to-top----------------------------*/
		(function(){
			var $btn = $('section.active > .mid > .to-top'),
				$doc = $(document);
				var top = null;
			$btn.click(function(){
				m();
				function m(){
					top = $doc.scrollTop();
					top -= 200;
					top = Math.max(top,0);
					$doc.scrollTop(top);
					top>0?requestAnimationFrame(m):'';
				}
			});
		})();
	})();
});